import React, { useMemo } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
// import Highcharts3D from 'highcharts/highcharts-3d';
import { useTranslation } from 'react-i18next';

// Highcharts3D(Highcharts);

const chineseNums = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];

const BasicBarCharts = ({
  statisticalCenterData
}) => {
  const { t } = useTranslation();

  const dataMap = useMemo(() => {
    if (!statisticalCenterData?.invited_bidding) return;

    let newData = {};

    Object.keys(statisticalCenterData?.invited_bidding)?.forEach(year => {
      Object.keys(statisticalCenterData?.invited_bidding[year])?.sort((a, b) => a - b)?.forEach(month => {
        newData[`${year} ${t(chineseNums[month])} ${t('Quarter')}`] = statisticalCenterData?.invited_bidding[year][month];
      })
    })

    return newData;
  }, [statisticalCenterData, t])

  const dataMapKey = Object.keys(dataMap || {}) || [];

  const options = {
    chart: {
      type: 'bar',
      style: {
        fontSize: '1em'
      },
    },
    title: {
      text: t('Statistics of regions invited to quote'),
      align: 'left'
    },
    // subtitle: {
    //   text: 'Source: <a ' +
    //       'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
    //       'target="_blank">Wikipedia.org</a>',
    //   align: 'left'
    // },
    xAxis: {
      categories: dataMapKey,
      title: {
        text: null
      },
      gridLineWidth: 1,
      lineWidth: 0
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Population (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      },
      gridLineWidth: 0
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        borderRadius: '50%',
        dataLabels: {
          enabled: true
        },
        groupPadding: 0.1
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -80,
      y: 80,
      floating: true,
      borderWidth: 1,
      backgroundColor:
        Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
      shadow: true,
      style: {
        fontSize: '1em'
      },
    },
    credits: {
      enabled: false
    },
    series: [
      {
        name: t('Asia'),
        data: dataMapKey.map(key => dataMap[key]['亚洲'] ? Number(dataMap[key]['亚洲']) : null)
      },
      {
        name: t('Europe'),
        data: dataMapKey.map(key => dataMap[key]['欧洲'] ? Number(dataMap[key]['欧洲']) : null)
      },
      {
        name: t('America'),
        data: dataMapKey.map(key => dataMap[key]['美洲'] ? Number(dataMap[key]['美洲']) : null)
      },
      {
        name: t('Africa'),
        data: dataMapKey.map(key => dataMap[key]['非洲'] ? Number(dataMap[key]['非洲']) : null)
      },
      {
        name: t('Oceania'),
        data: dataMapKey.map(key => dataMap[key]['大洋洲'] ? Number(dataMap[key]['大洋洲']) : null)
      },
    ],
    credits: {
      // 是否显示版权链接
      enabled: false
    }
  };

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
    />
  );
};

export default BasicBarCharts;